<template>
  <div id="id1">
    <h1>我是destroy组件</h1>
    {{ data1 }}
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: 20,
    },
    id2: {
      default: 20,
      typr: Number,
      require: true,
    },
  },
  data() {
    return {
      data1: "组件销毁阶段测试",
      data2: "我被销毁了，这是最后给你说的话",
    };
  },
  beforeDestroy() {
    console.log("组件马上销毁");
    this.$emit("childtoparent", this.data2);
  },
  destroyed() {
    console.log("组件已经销毁");
  },
};
</script>

<style scoped>
#id1{
  background-color: aqua;
  height: 200px;
}
</style>